<script setup>
defineOptions({ name: 'orderDetail' })
import { searchPayStatus } from '@/api/pay.js'
import { getOrderDetail } from '@/api/order.js'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ref } from 'vue'
const route = useRoute()
onMounted(async () => {
  orderDetail.value = await getOrderDetail(route.params.id)
  console.log(orderDetail.value)
  orderStatus.value = await searchPayStatus(route.params.id)
})
const orderDetail = ref({})
const orderStatus = ref(0)
const handleDetail = () => {}
</script>

<template>
  <div>
    <ShopNavbar :title="'订单详情'"> </ShopNavbar>

    <div class="p-3 bg-white">
      <div>
        <span class="text-secondary"> 订单状态： </span>
        <span>
          {{
            ['请稍后...', '已下单', '已支付', '已发货', '已确认收货', '已过期'][
              orderStatus
            ]
          }}
        </span>
      </div>
      <div>
        <span class="text-secondary"> 订单编号： </span>
        <span> {{ orderDetail.order_no }} </span>
      </div>
      <div>
        <span class="text-secondary"> 下单时间： </span>
        <span> {{ orderDetail.pay_time }} </span>
      </div>
      <div>
        <span class="text-secondary"> 支付方式： </span>
        <span>
          {{ orderDetail.pay_type === 'aliyun' ? '支付宝支付' : '微信支付' }}
        </span>
      </div>

      <van-button
        :type="orderStatus === 1 ? 'warning' : 'default'"
        block
        @click="handleDetail"
      >
        {{
          ['请稍后', '已下单', '催发布', '查看物流', '去评价', '返回主页'][
            orderStatus
          ]
        }}
      </van-button>
    </div>

    <div class="p-3 bg-white my-5">
      <div>
        <span class="text-secondary"> 商品金额： </span>
        <span>￥ {{ orderDetail.amount }} </span>
      </div>
      <div>
        <span class="text-secondary"> 配送方式： </span>
        <span> 普通快递 </span>
      </div>
    </div>

    <template v-if="Object.keys(orderDetail).length">
      <div
        class="p-3 d-flex align-items-center"
        v-for="items in orderDetail.orderDetails.data"
        :key="items.id"
        @click="$router.replace(`/detail/${items.goods.id}`)"
      >
        <img
          :src="items.goods.cover_url"
          class="mx-3"
          alt=""
          width="100"
          height="100"
        />
        <div class="w-100">
          <h5 class="font-weight-bold">
            {{ items.goods.title }}
          </h5>
          <p>全场包邮</p>
          <div class="d-flex justify-content-between align-items-center">
            <h6 class="text-danger">￥{{ items.goods.price }}</h6>
            <sub>x{{ items.num }}</sub>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
